<template>
    <div>
        <el-upload
            :action="action"
            :headers="imagesData.headers"
            :on-change="handleChange"
            :before-upload="handleBeforeUpload"
            :on-preview="handlePreview"
            :on-remove="handleBeforeRemove"
            :data="imagesData"
            :accept="accept"
            :on-success="handleSuccess"
            :on-error="handleError"
            :show-file-list="false"
            class="avatar-uploader"
            :class="imageUrl ? '' : 'avatar-uploader-border'"
        >
            <img
                v-if="imageUrl"
                :src="imageUrl"
                class="avatar"
                :style="styleObject"
            />
            <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
                :style="styleObject"
            ></i>
            <i class="el-icon-close"></i>
        </el-upload>
        <!-- <p class="tips" style="margin-left: 10px; color: red">
            注：上传图片(限30M)
        </p> -->
        <el-dialog
            :visible.sync="dialogVisible"
            :width="imagesData.width + 50 + 'px'"
            :center="true"
            append-to-body
        >
            <img :width="imagesData.width" :src="dialogImageUrl" alt="" />
        </el-dialog>
    </div>
</template>
<script>
export default {
  data() {
    return {
      action:`${process.env.VUE_APP_BASE_API}/api/file-service/v1/file/uploadFile`,
      accept: 'image/*',
      imagesData: {
        width: 400,
        height: 400,
        token: localStorage.getItem("token"),
        headers: {}
      },
      styleObject: {
        width: '80px',
        'line-height': '80px',
        height: '80px'
      },
      imageUrl: '',
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  props: ['value', 'imageWidth', 'imageHeight', 'width', 'height'],
  watch: {
    value: function(newVal) {
      this.imageUrl = newVal
    }
  },
  computed: {},
  methods: {
    init() {
      this.imageUrl = this.value
      if (this.width) {
        this.styleObject.width = this.width
      }
      if (this.height) {
        this.styleObject.height = this.height
        this.styleObject['line-height'] = this.height
      }
      this.imagesData.width = parseInt(this.imageWidth)
      this.imagesData.height = parseInt(this.imageHeight)
      this.imagesData.headers = {token : (localStorage.token || '')}
    },
    handleChange(file, fileList) {},
    handleBeforeUpload(file) {
      if (
        file.type !== 'image/jpg' &&
        file.type !== 'image/jpeg' &&
        file.type !== 'image/png' &&
        file.type !== 'image/gif'
      ) {
        this.$message.error('只支持jpg、png、gif格式的图片！')
        return false
      }
      const size = file.size / 1024 / 1024
      if (size > 30) {
        this.$message.error('图片大小应该小于30M！')
        return false
      }
    },
    handleBeforeRemove(file, fileList) {
      this.imageUrl = ''
      this.$emit('input', this.imageUrl)
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleSuccess(response, file, fileList) {
      if (response.code !== 1) {
        this.imageUrl = ''
        this.$message.error(response.message)
      } else {
        this.imageUrl = response.result
        this.$emit('input', response.result)
      }
    },
    handleError(err, file, fileList) {
      this.imageUrl = ''
      this.$message.error('上传失败')
    }
  },
  created() {
    this.init()
  }
}
</script>
<style>
.avatar-uploader .el-upload {
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader-border .el-upload {
    border: 1px solid #dcdfe6;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader .el-icon-close {
    display: none;
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    color: #606266;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
}
.avatar {
    width: 80px;
    height: 80px;
    display: block;
}
</style>
